<template>
	<view class="printPage">
		<u-navbar title=" " bgColor="#fff" :autoBack="true">
			<view slot="left"><uni-icons type="left" size="16" color="#000"></uni-icons></view>
			<view slot="center" style="color:#000">
				积分兑换
			</view>
		</u-navbar>
		<view class="printListBox">
			<view class="printTop flex_heng">
				<view class="totalPrint">
					总积分<text>{{allIntegral.integralProfit || 0}}</text>
				</view>
				<view class="pointOrder" @tap="pointOrder()">
					积分订单
				</view>
			</view>
			<scroll-view class="goods-ul" scroll-y="true" lower-threshold="50" @scrolltolower="scrolltolower">
				<view class="orderList flex_heng">
					<view class="orderItemBox flex_shu" v-for="(item,index) in pointShopList" :key="index">
						<image :src="item.pic" mode="scaleToFill" class="itemImg"></image>
						<view class="itemShopBox flex_shu">
							<view class="shopCardTop flex_heng">
								<view class="shopCardName u-line-1">
									{{item.productName}}
								</view>
								<view class="shopCardSku">
									价值 ￥{{item.originalPrice}}
								</view>
							</view>

							<view class="shopCardBtm flex_heng">
								<view class="printNum">
									<text>{{item.integralPrice}}</text>积分
								</view>
								<view class="buyNow" @tap="exchange(item)">
									立即兑换
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore loadmoreText="正在全力加载更多..." dashed line fontSize="21rpx" nomore-text="没有更多啦!" :status="moreStatus" />
			</scroll-view>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		getIntegralGoodsList,
		getIntegralList,
		createPointOrder
	} from '@/api/api.js'
	export default {
		components: {
			// navber
		},
		data() {
			return {
				moreStatus: 'loadmore',
				describeShow: false,
				imgUrl: this.$imgUrl,
				allIntegral: 0,
				pointShopList: [],
			};
		},
		computed: {
			...mapState(['hasLogin', 'safeAreaBottom'])
		},
		onLoad() {

		},
		onShow() {
			this.getCouponList();
			this.getIntegralList()
		},
		methods: {
			exchange(item) {
				createPointOrder(item.id).then(res => {
					if (res.code == 200) {
						console.log('res', res)
						this.pointOrder()
					}
				})
			},

			pointOrder() {
				uni.navigateTo({
					url: `/package/pages/pointOrder/pointOrder`
				})
			},

			getIntegralList(userIntegral) {
				getIntegralList().then(res => {
					if (res.code == 200) {
						this.allIntegral = res.data
						if (res.rows.length > 0) {
							this.integralList = res.rows;
						}
					}
				}).finally(() => {
					this.moreStatus = 'nomore'
				})
			},
			// 获取优惠券列表
			getCouponList() {
				getIntegralGoodsList({
					// params:{
					// 	type:1
					// }
				}).then(res => {
					if (res.code == 200) {
						console.log(res);
						if (res.rows.length > 0) {
							this.pointShopList = res.rows
						}
					}
				})
			},
			scrolltolower() {
				console.log('到底了');
				this.moreStatus = 'nomore'
			},


		},
	};
</script>


<style lang="scss">
	.printPage {
		width: 100vw;
		padding: 180rpx 28rpx 28rpx;
		box-sizing: border-box;
		min-height: 100vh;
		background: #fff;

		.printListBox {
			width: 100%;
			height: 950rpx;
			border-radius: 27rpx;
			background-color: #FFFFFF;

			.printTop {
				.totalPrint {
					font-size: 32rpx;
					font-weight: 400;
					font-family: "Alibaba PuHuiTi 2.0";

					text {
						color: #ff8f1f;
						font-size: 36rpx;
						margin-left: 8rpx;
					}
				}

				.pointOrder {
					width: 180rpx;
					height: 58rpx;
					line-height: 58rpx;
					border-radius: 161rpx;
					opacity: 1;
					background: #007fff;
					color: #ffffff;
					text-align: center;
					font-size: 32rpx;
					font-weight: 500;
					font-family: "Alibaba PuHuiTi 2.0";
					letter-spacing: 0rpx;
				}
			}

			.goods-ul {
				height: 80vh;

				.orderList {
					flex-wrap: wrap;
					margin-top: 20rpx;

					.orderItemBox {
						width: 336rpx;
						opacity: 1;
						background: #ffffff;
						margin-bottom: 28rpx;

						.itemImg {
							width: 100%;
							height: 200rpx;
							border-radius: 16rpx 16rpx 0 0;
							opacity: 1;
						}

						.itemShopBox {
							width: 100%;
							padding: 16rpx;
							box-sizing: border-box;
							border: 1rpx solid #a4a4a4;
							border-top: none;
							border-radius: 0 0 16rpx 16rpx;

							.shopCardTop {
								width: 100%;
								justify-content: flex-start;
								font-family: "Alibaba PuHuiTi 2.0";
								letter-spacing: 0rpx;

								.shopCardName {
									color: #000000;
									font-size: 28rpx;
									font-weight: 600;
								}

								.shopCardSku {
									color: #333333;
									font-size: 22rpx;
									margin-left: 16rpx;
									width: 50%;
								}

							}

							.shopCardBtm {
								font-family: "Alibaba PuHuiTi 2.0";
								letter-spacing: 0rpx;
								width: 100%;

								.printNum {
									color: #333333;
									font-size: 28rpx;

									text {
										color: #ff8f1f;
										font-size: 36rpx;
									}
								}

								.buyNow {
									width: 152rpx;
									height: 58rpx;
									line-height: 58rpx;
									border-radius: 161rpx;
									opacity: 1;
									background: #007fff;
									color: #ffffff;
									text-align: center;
									font-size: 28rpx;
									font-weight: 500;
								}
							}
						}
					}
				}
			}

		}
	}
</style>